<!--
 * @Author: WLang
 * @LastEditors: WLang
 * @Description: 
 * @Date: 2023-07-26 14:23:27
 * @LastEditTime: 2023-07-29 12:11:24
 * @FilePath: \my-wyy\src\views\SongPlay.vue
-->
<template>
  <div class="wyy-song">
    <div class="wyy-song-player">
      <van-image class="wyy-player-pole" :class="{play: isPlay}" width="80" :src="require('@/assets/images/needle-ab.png')">
      </van-image>
      <div class="wyy-player-wrap">
        <van-image class="wyy-player-img" :class="{play: isPlay}" width="160" height="160" :src="songDetail.picUrl" round>
            <AudioPlayer ref="audioPlayer"
          :audio-list="audioList.map((elm) => elm.url)"
          :show-prev-button="false"
          :show-next-button="false"
          :show-volume-button="false"
          :show-playback-rate="false"
          :show-progress-bar="false"
          @pause="pauseSong"
          @timeupdate="timeupdate"
          :isLoop="false"
          :theme-color="`#fff`"
          :before-play="handleBeforePlay"/>
        </van-image>
      </div>
    </div>
    <div class="wyy-song-lyric">
      <div class="wyy-lyric-content">
        <p class="wyy-lyric-name">{{songDetail.name}}</p>
        <p class="wyy-lyric-word" v-for="(item, idx) in fixedLyric" :key="idx">{{item}}</p>
      </div>
    </div>
    <div class="wyy-song-button">
      <van-button class="wyy-button open" url="https://m.music.163.com/m/applink/?scheme=orpheus%3A%2F%2Fsong%2F2011061243" round>打开</van-button>
      <van-button class="wyy-button download" url="https://m.music.163.com/m/applink/?scheme=orpheus%3A%2F%2Fsong%2F2011061243" round>下载</van-button>
    </div>
  </div>
</template>
<script setup>
  import AudioPlayer from '@liripeng/vue-audio-player'
  import request from '@/utils/request'
  import { onMounted, reactive, computed, ref} from 'vue';
  import { useRoute } from 'vue-router';
  const audioPlayer = ref('')
  const duration = ref('')
  const currentTime = ref(0)
  const lyric = ref('')
  const opacity = ref(1)
  const route = useRoute()
  const timeArray = ref([])
  const audioList = ref([{
    name: 'audio1',
    url: `https://music.163.com/song/media/outer/url?id=${route.query.id}.mp3`
  }])
  const songDetail = reactive({
    name: '',
    id: '',
    picUrl: ''
  })
  const songUrl = computed(() => {
    return `url(${songDetail.picUrl})`
  })
  
  const fixedLyric = computed(() => {
    return lyricFix(lyric.value)
  })

  // const time = computed(() => {
  //   return formatSongTime(lyric.value)
  // })

  const isPlay = ref(false)


  //获取单曲的详情信息
  const getSongDetails = async (id) => {
    const data = await request('/song/detail', 'get', {ids: id})
    songDetail.name = `${data.songs[0].al.name} - ${data.songs[0].ar[0].name}`
    songDetail.id = data.songs[0].al.id
    songDetail.picUrl = data.songs[0].al.picUrl
  }

  //获取歌词
  const getLyricMsg = async (id) => {
    const data = await request('/lyric', 'get', {id: id})
    lyric.value = data.lrc.lyric
    formatSongTime(lyric.value)
  }

  //歌词处理
  const lyricFix = (string) => {
    return string.split(/\s*\n*\[.*?\]\s*/).filter(v => !!v)
  }

  //歌词时间处理  
    function formatSongTime (string) {
    const regTime = /\d{2}:\d{2}.\d{2,3}/g
    const regMin = /.*:/
    const regSec = /:.*\./
    const regMs = /\./
    let TimeData = string.match(regTime)
    const fixedTime = TimeData.map((item) => {
      return {
        min: parseInt(item.match(regMin)[0].slice(0, 2)),
        Sec: parseInt(item.match(regSec)[0].slice(1, 3)),
        Ms: parseInt(item.slice(item.match(regMs).index + 1, item.match(regMs).index + 3))
      }
    })
      timeArray.value = fixedTime.map((item) => {
      let min = item.min
      let sec = item.Sec
      let ms = item.Ms
      if (min !== 0)
      {
        sec += 60 * min
      }
      return `${sec}.${ms}`
    })
  }


    //播放歌曲前
  function handleBeforePlay (next) {
    isPlay.value = true;
    opacity.value = 0;
    next()
  }

  //播放歌曲暂停时
  function pauseSong  () {  
    isPlay.value = false;
    opacity.value = 1;
  }

  //获取歌曲当前时间线 和 总时长
  function timeupdate () {
        duration.value = audioPlayer.value.duration
        currentTime.value = audioPlayer.value.currentTime
  }

  // 获取当前歌曲滑动路程
  const diatance = computed(() => {
    const Time = timeArray.value.slice()
    const storage = Time.filter((item) => {
     return item < currentTime.value
    })
    return `translateY(-${(storage.length) * 28}px)` 
  })
  
  onMounted(() => {
    const id = route.query.id
    getSongDetails(id)
    getLyricMsg(id)
  })

</script>
<style lang="scss" scoped>
 @keyframes rotate360 {
        0% {
          transform: rotate(0deg);
        }
        50% {
          transform: rotate(180deg);
        }
        100% {
          transform: rotate(360deg);
        }
    }
  .wyy-song {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100vh;
    position: relative;
    &::after {
      content: '';
      width: 100%;
      height: 100vh;
      position: absolute;
      top: 0;
      left: 0;
      background: v-bind(songUrl) no-repeat center/cover;
      z-index: -1;
      filter: blur(10px);
    }

    .wyy-song-button {
      width: 100%;
      display: flex;
      justify-content: space-around;
      margin-top: 80px;
      .wyy-button {
        width: 172px;
        height: 42px;
        border: 1px solid #ff3b3a;
        background-color: rgba(255, 255, 255, 0);
        &.download {
          background-color: #ff3b3a;
          color: #fff;
        }
      }
     }

    .wyy-song-lyric {
      width: 200px;
      height: 70px;
      overflow: hidden;
      text-align: center;
      margin-top: 20px;
      box-shadow: 0 0 10px rgba(255, 255, 255, .2) outset;
      .wyy-lyric-content {
        transform: v-bind(diatance);
        transition: transform .2s linear;
        .wyy-lyric-word {
        line-height: 30px;
        font-size: 16px;
        color: #ccc;
        }
        .wyy-lyric-name {
        line-height: 20px;
        font-size: 20px;
        color: #fff;
        margin-bottom: 20px;
      }
      }
    }
    .wyy-song-player {
      width: 250px;
      height: 250px;
      text-align: center;
      margin-top: 70px;
      position: relative;
      .wyy-player-pole {
        position: absolute;
        left: 50%;
        top: -20%;
        z-index: 1;
        transform-origin: left top;
        transform: rotate(-35deg);
        transition: transform .5s linear;
        &.play {
            transform: rotate(0deg);
          }
      }
      
      .wyy-player-wrap {
        position: relative;
        width: 250px;
        height: 250px;
        background: url(../assets/images/disc-plus.png) no-repeat center/cover;
        display: flex;
        justify-content: center;
        align-items: center;
        .wyy-player-img {
          animation: rotate360 12s linear infinite;
          animation-play-state: paused;
          &.play {
            animation-play-state: running
          }
          .audio-player {
            position: absolute;
            width: 230px;
            height: 230px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: v-bind(opacity);
            &::v-deep .audio__play-start {
              width: 210px;
              height: 210px;
              display: flex;
              justify-content: center;
              align-items: center;
          }
        } 
      }
    }
  }
}
</style>